<!-- 播放属性 -->
<template>
    <div>
        <span class="device-attr-title">{{ $t('播放属性设置') }}</span>
        <el-row>
            <el-col :span="1" style="text-align: center;" v-if="editorForm.macs || editorForm.updateGroupId">
                <el-form-item>
                    <el-checkbox v-model="editorForm.defaultBrightnessChecked"></el-checkbox>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('亮度调节')" class="slider-adjust">
                    <el-slider v-model="editorForm.defaultBrightness" style="width:240px" :disabled="!editorForm.defaultBrightnessChecked"></el-slider>
                </el-form-item>
            </el-col>
            <el-col :span="10">
                <el-form-item>{{ $t('亮度') }}:{{ editorForm.defaultBrightness }}</el-form-item>
                <el-button style="margin-left:15px;" type="primary" size="small" @click="setTimeInfo('brightness')">时间段</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="1" style="text-align: center;" v-if="editorForm.macs || editorForm.updateGroupId">
                <el-form-item>
                    <el-checkbox v-model="editorForm.defaultVolumeChecked"></el-checkbox>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('音量调节')">
                    <el-slider v-model="editorForm.defaultVolume" style="width:240px" :disabled="!editorForm.defaultVolumeChecked"></el-slider>
                </el-form-item>
            </el-col>
            <el-col :span="11">
                <el-form-item>{{ $t('音量') }}:{{ editorForm.defaultVolume }}</el-form-item>
                <el-button style="margin-left:15px;" type="primary" size="small" @click="setTimeInfo('volumn')">时间段</el-button>
            </el-col>
        </el-row>
        <play-attr-dialog :visible.sync="showPlayAttrDialog" :initPlayAttrData="initPlayAttrData" :type="setType" @save="handleSetPlayAttrInfo"></play-attr-dialog>
    </div>
</template>

<script>
import PlayAttrDialog from './PlayAttrDialog.vue'
export default {
    components: {
        PlayAttrDialog
    },
    name: "PlayAttr",
    data() {
        return{
            initPlayAttrData: [],
            showPlayAttrDialog: false,
            setType: 'brightness'
        }
    },
    props: {
        editorForm: {
            default:{}
        }
    },
    mounted() {
        this.$nextTick(function(){
        })
    },
    methods: {
        setTimeInfo(type) {
            console.log(this.editorForm.brightness)
            console.log(this.editorForm.volumes)
            if(type == 'brightness') {
                this.initPlayAttrData = this.editorForm.brightness
            } else {
                this.initPlayAttrData = this.editorForm.volumes
            }
            this.setType = type
            this.showPlayAttrDialog = true
        },
        handleSetPlayAttrInfo(data, type) {
            if(type == 'brightness') {
                this.$set(this.editorForm, 'brightness', data)
            } else {
                this.$set(this.editorForm, 'volumes', data)
            }
            console.log(type, this.editorForm.brightness)
            console.log(type, this.editorForm.volumes)
        }
    }
}
</script>


<style lang="scss" scoped>
.slider-adjust {
    ::v-deep .el-form-item--small .el-form-item__content {
        width: 300px;
    }
}
</style>